<template>
  <!--考试列表新增/编辑弹窗-->
  <a-modal
    :maskClosable="false"
    :title="mdl.dialogTitleMap[mdl.dialogStatus]"
    :width="1000"
    @ok="mdl.dialogStatus === 'create' ? createData() : updateData()"
    v-model="mdl.visible"
    :confirm-loading="loading"
  >
    <a-form-model>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        label="试卷名称"
      >
        <a-input placeholder="" v-model="mdl.formData.exam.examName"/>
      </a-form-model-item>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        label="试卷备注"
      >
        <a-textarea :rows="4" v-model="mdl.formData.exam.examRemark"/>
      </a-form-model-item>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        label="考试对象"
      >
        <a-select
          mode="multiple"
          size="default"
          v-model="examObj"
          placeholder="请选择考试对象"
          @change="handleChangeExam"
        >
          <a-select-option :value="0">企业用户</a-select-option>
          <a-select-option :value="3">个人用户</a-select-option>
          <a-select-option :value="4">环保局员工</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="考试时间"
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol">
        <a-range-picker
         :defaultValue="[$util.moment(mdl.formData.exam.startTime),$util.moment(mdl.formData.exam.endTime)]"
         format="YYYY-MM-DD"
          @change="onChange"/>
      </a-form-model-item>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        label="考试时长"
      >
        <a-input-number v-model="mdl.formData.exam.examTime" :min="10" :max="180"/>
      </a-form-model-item>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        label="需满多少学时进行考试"
      >
        <a-input-number v-model="mdl.formData.exam.needStudyTime" :min="0" :max="100"/>
      </a-form-model-item>

      <a-form-model-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        v-if="mdl.dialogStatus === 'create'"
        label="选择题库">
        <a-select
          mode="multiple"
          size="default"
          placeholder="请选择题库"
          v-model="question"
          @change="handleChange"
        >
           <a-select-option v-for="(action, index) in questionLibList" :key="index" :value="action.examId">{{ action.examName }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        v-if="mdl.dialogStatus == 'create'"
        label="单选题数量"
      >
        <a-input-number v-model="mdl.formData.questionNum0" :min="0" :max="50"/>
      </a-form-model-item>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        v-if="mdl.dialogStatus == 'create'"
        :wrapperCol="mdl.wrapperCol"
        label="多选题数量"
      >
        <a-input-number v-model="mdl.formData.questionNum1" :min="0" :max="50"/>
      </a-form-model-item>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        v-if="mdl.dialogStatus == 'create'"
        :wrapperCol="mdl.wrapperCol"
        label="判断题数量"
      >
        <a-input-number v-model="mdl.formData.questionNum2" :min="0" :max="50"/>
      </a-form-model-item>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        v-if="mdl.dialogStatus == 'create'"
        :wrapperCol="mdl.wrapperCol"
        label="简答题数量"
      >
        <a-input-number v-model="mdl.formData.questionNum3" :min="0" :max="50"/>
      </a-form-model-item>


      <!--编辑时不可改变的-->
      <a-form-model-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        v-if="mdl.dialogStatus != 'create'"
        label="选择题库">
        <a-select
          mode="multiple"
          size="default"
          placeholder="请选择题库"
          v-model="question"
          @change="handleChange"
          disabled
        >
          <a-select-option v-for="(action, index) in questionLibList" :key="index" :value="action.examId">{{ action.examName }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        v-if="mdl.dialogStatus != 'create'"
        label="单选题数量"
      >
        <a-input-number disabled v-model="mdl.formData.questionNum0" :min="0" :max="50"/>
      </a-form-model-item>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        v-if="mdl.dialogStatus != 'create'"
        label="多选题数量"
      >
        <a-input-number disabled v-model="mdl.formData.questionNum1" :min="0" :max="50"/>
      </a-form-model-item>
      <a-form-model-item
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        v-if="mdl.dialogStatus != 'create'"
        label="判断题数量"
      >
        <a-input-number disabled v-model="mdl.formData.questionNum2" :min="0" :max="50"/>
      </a-form-model-item>
      <a-form-model-item
        v-if="mdl.dialogStatus != 'create'"
        :labelCol="mdl.labelCol"
        :wrapperCol="mdl.wrapperCol"
        label="简答题数量"
      >
        <a-input-number disabled v-model="mdl.formData.questionNum3" :min="0" :max="50"/>
      </a-form-model-item>
  </a-form-model>
  </a-modal>
</template>
<script>
import {createRefundRecord,selectQuestionLibList,updateRefundRecord} from '@/api/examManage/testPaper.js'
import moment from 'moment';
export default {
  components: {

  },
  props: {
    /*   -------弹窗-------- */
    mdl: {}
  },
  data () {
    return {
      questionLibList:null,
      question: [],
      examObj: [],
      loading:false
    }
  },
  inject: ['upShow'],

  created () {
//      题库
      selectQuestionLibList().then(res => {
        if (res.code === 200) {
          this.questionLibList = res.data
         }
      })
  },
  watch: {
    id(value) {
        if(value!='') {
            this.question = this.mdl.formData.questionLibs
          this.mdl.formData.questionLibs = []
          this.question.forEach((item)=> {
            this.mdl.formData.questionLibs.push({"id":item})
          })
          this.examObj = []
          if(typeof this.mdl.formData.exam.examObjCompanyType=='string') {
            var obj = this.mdl.formData.exam.examObjCompanyType.split(',')
            obj.forEach(e=> {
              this.examObj.push(Number(e))
            })
          }else {
            this.examObj.push(this.mdl.formData.exam.examObjCompanyType)
          }
        }else {
          this.question=[]
          this.examObj=[]
        }
    }
  },
  computed: {
    id() {
        return this.mdl.id
    }
  },
  methods: {
//    选择题库
    handleChange (value) {
      console.log(`Selected: ${value}`)
      this.mdl.formData.questionLibs= []
      value.forEach((item)=> {
        this.mdl.formData.questionLibs.push({"id":item})
      })
    },
    handleChangeExam (value) {
      console.log(`Selected: ${value}`)
      this.mdl.formData.exam.examObjCompanyType = value.join(',')
    },
    //          新增试卷
    createData () {
        this.loading = true
      const parameter = this.mdl.formData
      createRefundRecord(parameter).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.upShow(1, '新增成功')
          this.mdl.visible = false
          this.$emit("getTableDataForExam")
        } else {
          this.upShow(2, res.msg)
        }
      }).catch(err => {
          this.loading = false
          this.upShow(2)
        })
    },
    //      编辑
    updateData () {
      this.loading = true
      const parameter = this.mdl.formData
      updateRefundRecord(parameter).then(res => {
        this.loading = false
        if (res.code === 200) {
           this.upShow(1, '修改成功')
          this.mdl.visible = false
          this.$emit("getTableDataForExam")
        } else {
          this.upShow(2, res.msg)
        }
      }).catch(err => {
          this.loading = false
          this.upShow(2)
        })
    },
    // 时间选择
    onChange (checkedValues) {
      console.log('checked = ', checkedValues)
//      console.log('value = ', this.mdl.formData.plainOptions)
      console.log(checkedValues[0].format('YYYY-MM-DD HH:mm:ss'))
      console.log(checkedValues[1].format('YYYY-MM-DD HH:mm:ss'))
      this.mdl.formData.exam.startTime = checkedValues[0].format('YYYY-MM-DD HH:mm:ss')
       this.mdl.formData.exam.endTime = checkedValues[1].format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
